﻿/// <reference path="jquery-1.5.1.js" />

TutulTest = {};
TutulTest.ImageSlider = function (hiddenImageContainerID, sliderContainerID, imageContainerID) {
    var _Self = this;
    this.HiddenImageContainer = hiddenImageContainerID;
    this.SliderContainer = sliderContainerID;
    this.ImageContainer = imageContainerID;
    this.Images = new Array();
    this.ImageIndex = 0;
    this.TimeOut = 5; //Should be given in seconds
    this.TimeOutValue = 0.0;
    this.HasPaused = false;
    this.LoadImages = function () {
        $('#' + _Self.HiddenImageContainer).find('img').each(function (i, imgObj) {
            _Self.Images.push(imgObj.src);
        });
    };
    this.AnimationComplete = function (imageIndex) {

    };
    this.FadeInImage = function () {        
        $('#' + _Self.ImageContainer).attr("style", 'background-image: url(' + _Self.Images[_Self.ImageIndex] + ')');
        $('#' + _Self.SliderContainer).fadeIn('slow', _Self.AnimationComplete(_Self.ImageIndex));
    };
    this.FadeOutImage = function () {
        $('#' + _Self.SliderContainer).fadeOut('slow', function () { _Self.FadeInImage(); });        
    };
    this.ChangeImage = function (imageIndex) {
        if (typeof (imageIndex) == 'undefined')
            _Self.ImageIndex++;
        else {
            _Self.ImageIndex = imageIndex;
            clearTimeout(this.TimeOutValue);
        }
        if (_Self.ImageIndex > (_Self.Images.length - 1))
            _Self.ImageIndex = 0;
        _Self.FadeOutImage(_Self.ImageIndex);
        if (!_Self.HasPaused)
            _Self.TimeOutValue = setTimeout(function () { _Self.ChangeImage(); }, (_Self.TimeOut * 1000));
        _Self.SetSelectedActionButton(_Self.ImageIndex);
    };
    this.PlayAnimation = function (imageIndex) {
        _Self.LoadImages();
        _Self.BindActionButtons();
        if (typeof (imageIndex) == 'undefined' || imageIndex == null)
            setTimeout(function () { _Self.ChangeImage(0); }, (_Self.TimeOut * 1000));
        else
            setTimeout(function () { _Self.ChangeImage(imageIndex); }, (_Self.TimeOut * 1000));
    };
    this.PauseAnimation = function () {
        clearTimeout(_Self.TimeOutValue);
        _Self.HasPaused = true;
    };
    this.PlayPauseAnimation = function (img) {
        if (img.className == 'sl-pause-button') {
            img.className = 'sl-play-button';
            $(img).attr('alt', 'Play').attr('title', 'Play');
            _Self.PauseAnimation();
        }
        else {
            img.className = 'sl-pause-button';
            $(img).attr('alt', 'Pause').attr('title', 'Pause');
            _Self.HasPaused = false;
            _Self.ImageIndex++;
            _Self.ChangeImage(_Self.ImageIndex);
        }
    };
    this.MoveNext = function () {
        if (_Self.ImageIndex >= 0 && _Self.ImageIndex < _Self.Images.length) {
            _Self.ChangeImage(_Self.ImageIndex + 1);
        }
        else {
            _Self.ChangeImage(0);
        }
    };
    function MovePrevious() {
        if (_Self.ImageIndex > 0 && _Self.ImageIndex < _Self.Images.length) {
            _Self.ChangeImage(_Self.ImageIndex - 1);
        }
        else {
            _Self.ChangeImage(_Self.Images.length - 1);
        }
    };
    this.BindActionButtons = function () {
        $('.sl-deselected-action, .sl-selected-action').click(function () {
            _Self.ChangeImage($(this).html() - 1);
        });
        $('.sl-pause-button, .sl-play-button').click(function () {
            _Self.PlayPauseAnimation($(this));
        });
    };
    this.SetSelectedActionButton = function (imageIndex) {
        var value = imageIndex + 1;
        $('.sl-deselected-action, .sl-selected-action').each(function () {
            if ($(this).html() == value) {
                $('.sl-deselected-action, .sl-selected-action').removeClass('sl-selected-action').addClass('sl-deselected-action');
                $(this).removeClass('sl-deselected-action');
                $(this).addClass('sl-selected-action');
            }
        });
    };
};